<template>
    <div id="main">
      <!-- 显示Markdown网页 -->
      <div id="showCard" style="width: 97%;margin-left: 10px;height: 870px;">
        <v-textarea
            v-model="content"
            label="Label"
            auto-grow="true"
            style="display: none;"
        ></v-textarea>
      </div>
      <!--右侧的目录栏-->
      <v-navigation-drawer
        absolute
        permanent
        right
        :mini-variant.sync="md_mini"
        width="400px"
      >
        <v-sheet
          id="scrolling-techniques-6"
          class="overflow-y-auto"
          max-height="870"
        >
          <v-btn
            top
            icon
            @click="md_mini=!md_mini"
            class="fab-container"
          >
            <v-icon>{{ md_mini ? 'mdi-chevron-left' : 'mdi-chevron-right' }}</v-icon>
          </v-btn>
          <v-container style="height: 870px;width: 100%;">
            <div id="tocShow" style="width: 100%;margin-left: 10px;height: 870px;"></div>
          </v-container>
        </v-sheet>
      </v-navigation-drawer>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'


export default defineComponent({
    
    setup() {

    },

    data(){
        return{
          md_mini: true,
          content: '## init data',
          filename: this.$route.params.name,
          instance: null,
        }
    },
    beforeMount(){
        this.instance = null
    },
    mounted() {

        this.initViewMd();
    },
    methods: {
        initViewMd(){
            console.log(this.filename)
            this.content = '## res.data.data'
            let get_data = {'filename': this.filename}
            this.$api.doc.getContent(get_data).then(res=>{
                console.log('res contenet')
                console.log(res)
                this.content = res.data.data
                this.instance = window.editormd.markdownToHTML("showCard", {
                    // path: 'editormd/lib/',
                    markdown: this.content,
                    // markdownSourceCode: true,
                    tocDropdown: true,
                    tocContainer: '#tocShow',
                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
                    emoji           : true,
                    taskList        : true,
                    tex             : true,  // 默认不解析
                    flowChart       : true,  // 默认不解析
                    sequenceDiagram : true,  // 默认不解析
                });
            });
        },
    }
})
</script>

<style scoped>
.fab-container {
    background-color:whitesmoke;
    position: fixed;
    top: 10;
    right: 10;
  }
</style>
